export default {
	name:'SimpleGraph',
	data () {
		return {
		}
	},
	mounted () {
		this.drawGraph()
	},
	methods: {
		drawGraph () {
			// 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById('flow_chart'))
      var type = ['circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none']
      var nodeData = [{
                      name: '流程1',
                      x: 300,
                      y: 300
                  }, {
                      name: '节点2',
                      x: 300,
                      y: 400
                  }, {
                      name: '节点3',
                      x: 300,
                      y: 500
                  }, {
                      name: '节点4',
                      x: 300,
                      y: 600
                  }]
				var links = [{
                      source: 0,
                      target: 1,
                  }, {
                      source: 1,
                      target: 2
                  }, {
                      source: '节点3',
                      target: '节点4'
                  }]
      // 绘制图表
      myChart.setOption({
          title: {
              text: 'PFMAE'
          },
          tooltip: {},
          animationDurationUpdate: 1500,
          animationEasingUpdate: 'quinticInOut',
          series : [
              {
                  type: 'graph',
                  layout: 'none',
                  symbolSize: 50,
                  roam: true,
                  label: {
                      normal: {
                          show: true
                      }
                  },
                  edgeSymbol: ['circle', 'arrow'],
                  edgeSymbolSize: [4, 10],
                  edgeLabel: {
                      normal: {
                          textStyle: {
                              fontSize: 20
                          }
                      }
                  },
                  data: nodeData.map((item, index)=> {
                    return {
                      x:item.x,
                      y:item.y,
                      name:item.name,
                      symbol: type[index]
                    }
                  }),
                  // links: [],
                  links: links,
                  lineStyle: {
                      normal: {
                          opacity: 0.9,
                          width: 2,
                          curveness: 0
                      }
                  }
              }
          ]
      });
      //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候)
      window.addEventListener('resize',function() {myChart.resize()})
		}
	}
}